<template>
  <div>
    <van-tabs v-model="active" animated sticky color="#3296fa" class="channel-tabs" @click="onClick" >
      <van-tab v-for="item in channel" :key='item.id' :title="item.name"></van-tab>
    </van-tabs>
    <div slot="nav-right" class="hamburger-btn" @click="isEditChannelShow = true">
      <van-icon name="wap-nav" class="hamburger-btn-nav"/>
    </div>
    <!-- 列表 -->
    <div class="van_pull_refresh">
     <van-pull-refresh
         :success-text="refreshSuccessText"
         :success-duration="1500"
         v-model="isRefreshLoading"
         @refresh="onRefresh">
         <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :error.sync="error" error-text="请求失败，点击重新加载">
             <van-cell v-for="(article, index) in list" :key="index" :title="article.title" class="article-item">
               <div v-if="article.cover.type === 3" class="cover-wrap">
                 <div class="cover-item" v-for="(img, index) in article.cover.images" :key="index">
                   <van-image class="cover-item-img" fit="cover" :src="img"/>
                 </div>
               </div>
             </van-cell>
         </van-list>
     </van-pull-refresh>
    </div>
    <!-- 频道编辑 -->
    <van-popup class="edit-channel-popup" v-model="isEditChannelShow" position="bottom" :style="{ height: '100%' }" closeable close-icon-position="top-left">
      内容</van-popup>
   </div>
</template>
 
<script>
import { getArticles } from '@/api/user'
export default {
  components: {},
  props: {
    channel: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      active: 0,
      list: [], // 文章列表数据
      loading: false, // 上拉加载更多的 loading 状态
      finished: false, // 是否加载结束
      error: false, // 是否加载失败
      timestamp: null, // 请求下一页数据的时间戳
      isRefreshLoading: false,
      refreshSuccessText: '',
      isEditChannelShow: false, // 这里我们先设置为 true 就能看到弹窗的页面了
    };
  },
  methods: {
    onClick(name, title){
      console.log(name);
      console.log(title);
      console.log(this.active);
    },
    // 当触发上拉加载更多的时候调用该函数
    async onLoad () {
      try {
        // 1. 请求获取数据
        const { data } = await getArticles({
          channel_id: this.active, // 频道 id
          timestamp: this.timestamp || Date.now(), // 时间戳，请求新的推荐数据传当前的时间戳，请求历史推荐传指定的时间戳
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })
        console.log(data.data.results)

        // 2. 把数据添加到 list 数组中
        const { results } = data.data
        this.list.push(...results)

        // 3. 设置本次加载中 loading 状态结束
        this.loading = false

        // 4. 判断数据是否加载结束
        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp
        } else {
          // 没有数据了，设置加载状态结束，不再触发上拉加载更多了
          this.finished = true
        }
      } catch (err) {
        console.log(err)
        this.loading = false // 关闭 loading 效果
        this.error = true // 开启错误提示
      }
    },
    // 当触发下拉刷新的时候调用该函数
    async onRefresh () {
      try {
        // 1. 请求获取数据
        const { data } = await getArticles({
          channel_id: this.active, // 频道 id
          timestamp: Date.now(), // 下拉刷新每次都应该获取最新数据
          with_top: 1 // 是否包含置顶，进入页面第一次请求时要包含置顶文章，1-包含置顶，0-不包含
        })
    
        // 2. 将数据追加到列表的顶部
        const { results } = data.data
        this.list.unshift(...results)
    
        // 3. 关闭下拉刷新的 loading 状态
        this.isRefreshLoading = false
    
        // 提示成功
        this.refreshSuccessText = `刷新成功，更新了${results.length}条数据`
      } catch (err) {
        console.log(err)
        this.isRefreshLoading = false // 关闭下拉刷新的 loading 状态
        this.$toast('刷新失败')
      }
    }
  }
};
</script>

<style scoped lang="less">
.channel-tabs{
  width: 92%;
  position: fixed;
  top: 45px;
  z-index: 10;
}
.van_pull_refresh{
  padding-top: 90px;
}
.hamburger-btn {
  z-index: 10;
  position: fixed;
  height: 50px;
  top: 40px;
  right: 0;
  width: 8%;
  display: flex;
  background-color: #fff;
  .hamburger-btn-nav{
    margin:0 auto;
    margin-top: 20px;
  }
}
::v-deep .van-cell__value{
  width: 300px;
  height: 180px;
  padding-left: 0px;
}
.article-item {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding-right: 20px;
  .title {
    font-size: 32px;
    color: #3a3a3a;
  }

  .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
  }

  .right-cover {
    width: 232px;
    height: 146px;
  }

  .label-info-wrap span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }

  .cover-wrap {
    display: flex;
    padding: 30px 0;
    .cover-item {
      flex: 1;
      height: 146px;
      &:not(:last-child) {
        padding-right: 4px;
      }
      .cover-item-img {
        width: 100%;
        height: 146px;
      }
    }
  }
}
.edit-channel-popup {
  padding-top: 100px;
	box-sizing: border-box;
}
</style>